<template>
  <div v-loading.fullscreen.lock="loading">
    <navbar :showHeaderIcon="true" />
    <div class="app-container">
      <div class="searchInput">
        <div class="inputSelect">
          <span>时间：</span>
          <el-date-picker
            v-model="detaTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            value-format="yyyy-MM-dd"
            @change="handleSearch"
          >
          </el-date-picker>
        </div>
        <!-- <div class="inputSelect" style="margin-right:30px;">
                    <span>考试状态：</span>
                    <el-select v-model="examStatus" placeholder="请选择考试状态">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
        <div class="inputSelect" style="margin-left: 20px">
          <span>项目： </span>
          <el-input
            v-model="querydate.examName"
            placeholder="请输入项目编号或项目名称"
            suffix-icon="el-icon-search"
            clearable
            @input="handleSearch"
          ></el-input>
        </div>
      </div>
      <Empty
        style="width: 1200px; margin: 20px auto"
        v-if="!loading && examlist.length == 0"
      />
      <div class="examList" v-for="item in examlist">
        <div>
          <h3>{{ item.examName }}</h3>
          <div class="dxboxset"><span>单校考</span><span>评阅开始</span></div>
          <div>
            <i
              ><span>年级：</span
              >{{ selectDictLabel(dict.type.grade, item.grade) }}</i
            ><i><span>考试模式：</span>{{ item.projectMode }}</i
            ><i><span>考试方式：</span>线下考试</i
            ><i
              ><span>考试日期：</span>{{ item.startTime }} 至
              {{ item.endTime }}</i
            >
          </div>
        </div>
        <el-button @click="ReviewPaper(item)">评阅试卷</el-button>
      </div>
    </div>
    <div class="page-bottom">
      <div style="width: 1200px; margin: 0 auto">
        <div class="page-bottom-content">
          <span class="total">共{{ examlist.length }}条数据</span>
          <!-- <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="querydate.pageNum"
            :limit.sync="querydate.pageSize"
            @pagination="getList"
          /> -->
        </div>
      </div>
    </div>
    <!-- <Tasklist
      v-if="tasklistIshow"
      :examlist="taskexamlist"
      @refshTask="refshTask"
      v-loading="taskloading"
      :reviewId="reviewId"
    ></Tasklist> -->
  </div>
</template>

<script>
import { Navbar } from "@/layout/components";
// import Tasklist from "../../components/mark/tasklist.vue";
import { debounce } from "lodash";
import { reviewListdate, exammainlist } from "@/api/mark/mark.js";
export default {
  dicts: ["grade"],
  components: {
    Navbar,
    // Tasklist,
  },
  data() {
    return {
      detaTime: null,
      examStatus: "",
      examName: "",
      querydate: {
        pageNum: 1,
        pageSize: 15,
        stopped: 0,
        startTime: "",
        endTime: "",
        examName: "",
        schoolId: this.$auth.hasRole("admin")
          ? ""
          : this.$store.state.user.deptId,
      },
      total: 0,
      examlist: [],
      // tasklistIshow: false,
      reviewId: "",
      taskexamlist: [],
      taskloading: false,

      loading: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    debouncedSearch: debounce(function () {
      this.querydate.pageNum = 1;
      this.getList();
    }, 500),
    handleSearch() {
      this.debouncedSearch();
    },
    getList() {
      this.loading = true;
      if (this.detaTime) {
        this.querydate.startTime = this.detaTime[0];
        this.querydate.endTime = this.detaTime[1];
      } else {
        this.querydate.startTime = "";
        this.querydate.endTime = "";
      }

      exammainlist(this.querydate)
        .then((res) => {
          if (res.code == 200) {
            this.total = res.total;
            this.examlist = res.data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // getExamlistDate(val) {
    //   if (val == null) {
    //     this.querydate.startTime = "";
    //     this.querydate.endTime = "";
    //   } else {
    //     this.querydate.startTime = val[0];
    //     this.querydate.endTime = val[1];
    //   }
    //   this.getList();
    // },
    // projectName(val) {
    //   this.querydate.examName = val;
    //   this.getList();
    // },
    //评阅
    ReviewPaper(item) {
      this.$store.dispatch("setXmxx", item).then((res) => {
        if (this.$auth.hasExamPermi("reviewing:teachers:stpy")) {
          // this.tasklistIshow = true;
          this.reviewId = item.id;
          this.$router.push({
            path: "/tasklist",
            query: { projectId: item.id, examName: item.examName },
          });
        } else {
          this.$modal.alertError("您当前的账号没有试题阅卷权限");
        }
      });
    },
  },
};
</script>

<style scoped>
.searchInput {
  width: 1200px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
}
.examList {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.examList h3 {
  padding: 0;
  margin: 0;
  font-size: 20px;
  color: #2a303b;
  font-weight: bold;
}
.examList >>> .el-button {
  background: #1a48db;
  font-size: 14px;
  color: #fff;
  border: none;
  width: 124px;
  height: 34px;
  background: #1a48db;
  border-radius: 4px;
}
.examList i {
  display: inline-block;
  font-style: normal;
  font-size: 14px;
  margin-right: 15px;
}
.examList i span {
  color: #5b6371;
}
.page-bottom-content {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 auto;
}
.total {
  font-size: 14px;
  line-height: 32px;
}
.pagination-container {
  margin: 0;
}
.inputSelect {
  display: flex;
  align-items: center;
}
.inputSelect span {
  font-size: 14px;
  color: #5b6371;
  display: inline-block;
  width: 42px;
  flex-shrink: 0;
  color: #606266;
  font-weight: bold;
  margin-right: 12px;
}
.inputSelect:first-child >>> .el-input__inner {
  width: 300px;
}
.inputSelect:first-child >>> .el-input {
  width: 300px;
}
.inputSelect:last-child >>> .el-input__inner {
  width: 300px;
}
>>> .el-input__suffix {
  right: 15px;
}
.dxboxset {
  padding: 14px 0;
}
.dxboxset span {
  display: inline-block;
}
.dxboxset span:first-child {
  width: 56px;
  height: 24px;
  background: #1a48db0a;
  border: 1px solid #1a48db;
  border-radius: 6px;
  font-size: 12px;
  color: #1a48db;
  text-align: center;
  line-height: 24px;
}
.dxboxset span:last-child {
  width: 68px;
  height: 24px;
  background: #288f410a;
  border: 1px solid #288f41;
  border-radius: 6px;
  text-align: center;
  line-height: 24px;
  color: #288f41;
  font-size: 12px;
  margin-left: 14px;
}
</style>